<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.12.3.js"></script>
		<script src="js/jquery.cookie.js"></script>
		<script type="text/javascript">
			$(function(){
				refresh();
				function refresh(){

					//获取cookie中的购物车数据
					var arr = $.cookie("cart")
					
					if(arr){
						arr = JSON.parse(arr);
						//先清空旧节点
						$("#exam").empty(); 
						//如果购物车中有商品
						if(arr.length > 0){
							//再添加新节点
							//遍历arr
							var totalNum = 0;
							var total = 0; //总价
							var height = 0;
							for(var i=0;i<arr.length;i++){
								var obj = arr[i];
								//创建节点
								var li = $("<li></li>").appendTo("#exam");
								if(obj.checked){
									$("<input class='check' type='checkbox' checked='checked'/>").appendTo(li);
									$("#exam li").eq( $(this).index() ).css("background","#fff4e8")
								}
								else{
									$("<input class='check' type='checkbox' />").appendTo(li);
								}
								$("<img src="+obj.img+"/>").appendTo(li);
								$("<span class='name'>"+ obj.name +"</span>").appendTo(li);
								$("<span class='price'>"+"￥"+ obj.price +"</span>").appendTo(li);
								$("<input type='button' class='sub' value='-' />").appendTo(li);
								$("<input type='text' class='num' value="+obj.num+" />").appendTo(li);
								$("<input type='button' class='add' value='+' />").appendTo(li);
								$("<a class='shoucang' href='javascript:;'>移至收藏夹</a>").appendTo(li);
								$("<a class='delete' href='javascript:;'>删除</a>").appendTo(li);
								//如果是选中的，则计算总价
								if(obj.checked){
									total +=obj.price*obj.num;
									totalNum +=obj.num;
									
								}
								height +=120;
								$(".box2").height(height);
								$(".box").height( height+70 )
							}
							//显示总价
							$("#clear").html(total);
							$("#choose span").html(totalNum);
							$.cookie("count",JSON.stringify(totalNum),{expires:30,path:"/"});
						}
						else{
							$("#clear").html(0);
							$("#choose span").html(0);
							$(".goShopping").show();
							$(".box2").css("background","#f6f6f6");
							$(".box2").css("height","90px")
							$(".pay").hide();
							$(".box1").hide();
						}
						
							if($("#clear").html()==0){
								$("#total").css("background","#a0a0a0")
							}
							else{
								$("#total").css("background","#eb7416")
							}
					}
				}
				//
				//删除
				$("#exam").on("click",".delete",function(){
					var index = $(this).index("#exam .delete");
					//删除cookie中对应的商品
					var arr = JSON.parse($.cookie("cart"));
					arr.splice(index, 1); //删除数组arr中的第index个商品
					
					$.cookie("cart",JSON.stringify(arr),{expires:30,path:"/"});
					isAllCheck();
					refresh();
					
				})
				//+
				$("#exam").on("click",".add",function(){
					var index = $(this).index("#exam .add");
					//将cookie中对应的商品数量增加
					var arr = JSON.parse($.cookie("cart"));
					arr[index].num++;
					$.cookie("cart",JSON.stringify(arr),{expires:30,path:"/"});
					refresh(); //局部刷新节点
				})
				//-
				$("#exam").on("click",".sub",function(){
					var index = $(this).index("#exam .sub");
					//将cookie中对应的商品数量减少
					var arr = JSON.parse($.cookie("cart"));
					arr[index].num--;
					if(arr[index].num < 1){
						arr[index].num = 1;
					}
					$.cookie("cart",JSON.stringify(arr),{expires:30,path:"/"});
					refresh(); //局部刷新节点
				})
				
				//勾选
				$("#exam").on("click", ".check", function(){
					var index = $(this).index("#exam .check");
					//将cookie中对应的商品的选中状态改变
					var arr = JSON.parse($.cookie("cart"));
					arr[index].checked = !arr[index].checked;
					$.cookie("cart", JSON.stringify(arr), {expires:30, path:"/"});
					isAllCheck(); //判断是否全选了
					refresh(); //局部刷新节点
				})
				
				//点击全选
				$("#allCheck").click(function(){
					var arr = JSON.parse($.cookie("cart"));
					for(var i=0;i<arr.length;i++){
						if( $(this).prop("checked") ){
							arr[i].checked = true;
						}
						else{
							arr[i].checked = false;
						}
						$.cookie("cart",JSON.stringify(arr),{expires:30,path:"/"});
						refresh(); //局部刷新节点
					}
				})
				//判断是否全选了
				isAllCheck();
				function isAllCheck(){
					
					var arr = JSON.parse( $.cookie("cart") );
					var sum = 0;
					for(var i=0;i<arr.length;i++){
						sum +=arr[i].checked;
					}
					//全选了
					if (sum == arr.length && arr.length!=0) {
						$("#allCheck").prop("checked", true);
					}
					//没有全选
					else {
						$("#allCheck").prop("checked", false);
						
					}
					
				}
				//删除选中
				$("#deleteSelect").click(function(){
					var arr = JSON.parse($.cookie("cart"));
					var newArr = [];
					for(var i=0;i<arr.length;i++){
						if(arr[i].checked == false){
							newArr.push(arr[i]);
						}
					}
					$.cookie("cart",JSON.stringify(newArr),{expires:30,path:"/"});
					isAllCheck();
					refresh();
				})
				//
				//弹出界面
				$(".denglu").click(function(){
					$(".Box").show()
				})
				//弹出界面
				$(".shoucang").click(function(){
					$(".Box").show()
				})
				//弹出界面
				$(".shoucang2").click(function(){
					$(".Box").show()
				})
				//弹出界面
				$("#total").click(function(){
					$(".Box").show()
				})
				//关闭弹出界面
				$("#guanbi").click(function(){
					$(".Box").hide()
				})
				$("#xx").click(function(){
					$(".duanxin").show();
					$(".zhanghao").hide();
				})
				$("#mm").click(function(){
					$(".zhanghao").show();
					$(".duanxin").hide();
				})
				
				
			})
		</script>
		<style type="text/css">
			html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, 
			fieldset, legend, img { margin:0; padding:0; }
			img{border:0;}
			ul li,ol{ list-style:none;}
			a{ text-decoration:none; color:#6c6c6c;}
			a:hover{ color:#f22e00;}
			input{ outline:none;}
			th,i,em,h1,h2,h3,h4,h5,h6,strong { font-style:normal; font-weight:normal; }
			body { color:#333;  font: 12px/22px '宋体', Tahoma, Arial; background:#fff;}
			table { border-collapse: collapse; border-spacing: 0; }
			button { cursor: pointer; }
			textarea { word-wrap: break-word; resize: none;}
			.clearfix:after{visibility:hidden; clear:both; display:block; 
				content:"."; height:0}
			
			.header{height: 75px;}
			.header .main{position: relative;}
			.header .main .logo a{position: absolute;top: 10px;left: 0;}
			.header .main .kefu{position: absolute;top: 5px;right: 0;width: 320px;height: 70px;}
			.header .main .kefu p span{font-size: 20px;color: #eb7416;font-weight: bold;}
			.main{width: 950px;margin: auto;}
			.bg{height: 60px;background: url(images/cart_07.jpg) no-repeat center;}
			.bg .main{border-top: 1px solid black;}
			.box{height: 160px;font: 12px/1.5 tahoma, arial, 宋体, sans-serif;}
			/*.box .main{height: 550px;}*/
			.box .main .box1{height: 30px;background: #e3e3e3;margin-top: 0px;margin-bottom: 39px;}
			.box .main .box1 ul li{float: left;height: 30px;line-height: 30px;
					margin: 0px 75px;text-align: center;}
			.box .main .box1 ul li:first-child{margin-left: 10px;}
			.box .main .box2{border: 1px solid #ccc;height: 480px;background: #fff;position: relative;}
			.box .main .box2 .goShopping{width: 500px;height: 60px;line-height: 60px;text-align: center;
					position: absolute;top: 15px;left: 200px;display: none;z-index: 1;
					background: url(images/GoShopping.png) no-repeat left;}
			.box .main .box2 .goShopping a{color: #f22e00;text-decoration: underline;}
			.box .main .box2 .goShopping a:hover{text-decoration: none;}
			/*.box .main .box2 #watch{width: 270px;height: 85px;position: absolute;
					top: 22px;left: 80px;border: 1px solid #ccc;}
			.box .main .box2 #watch li{width: 200px;height: 80px;}		
			.box .main .box2 #btn1{position: absolute;top: 55px;left: 10px;}			
			.box .main .box2 .cle{position: absolute;top: 55px;left: 390px;}
			.box .main .box2 .del{position: absolute;top: 40px;right: 120px;}*/
			.box .main .box2 #exam{height: 480px;width: 950px;position: absolute;top: 0;left: 0px;}
			.box .main .box2 #exam li{position: relative;width: 948px;height: 119px;
					border-bottom: 1px solid #ccc;background: #fff;}	
			.box .main .box2 #exam li img{position: absolute;top: 15px;left: 180px;border: 1px solid #ccc;}	
			.check,.name,.price,.sub,.num,.add,.delete,.shoucang{position: absolute;top: 55px;}
			.check{left: 10px;}
			.name{left: 250px;}	
			.price{left: 400px;color:  #eb7416;}	
			.sub,.add{cursor: pointer;border: 1px solid #ccc;background: #fff;}	
			.sub:hover,.add:hover{border: 1px solid #f45;}	
			.sub{left: 550px;}	
			.num{left: 580px;width: 30px;text-align: center;border: 1px solid #ccc;}	
			.add{left: 620px;}	
			.shoucang{left: 750px;top: 45px;}
			.delete{left: 770px;top: 65px;}
			
			.pay{height: 60px;margin-top: 5px;}
			.pay .main{border: 1px solid #ccc;height: 60px;position: relative;}
			.pay .main .chk li{height: 60px;line-height: 60px;float: left;margin-left: 20px;}
			.pay .main .chk li:first-child{margin-left: 10px;}
			.pay .main .chk li a{padding: 16px;}
			.pay .main .chk li a:hover{background: #eb7416;}
			.pay .main .chk li span{color: #eb7416;font-size: 18px;font-weight: bold;}
			.pay .main #total{width: 115px;height: 50px;position: absolute;top: 5px;
					right: 5px;background: #eb7416;border: 1px solid #ccc;
					border-radius: 5px;font-size: 24px;color: #fff;font-family: "微软雅黑";}
			.footer{height: 50px;margin-top: 100px;}
			.footer .main{height: 50px;border-top: 1px solid black;text-align: center;position: relative;}
			.footer .main p{height: 30px;line-height: 30px;}
			.footer .main h3{position: absolute;top: -50px;left: 20px;font-weight: bold;}
			.footer .main h3 span{font-family: "微软雅黑";font-size: 18px;}
			.footer .main h3 a{color: #f22e00;}
			
			.Box{width: 420px;height: 560px;background: #fff;position: fixed;
				top: 50px;right: 400px;display: none;z-index: 2;}
			 .Box .reg{width: 420px;height: 50px;background: #f7f7f7;}
			 .Box .reg ul li{float: left;width: 210px;height: 48px;
				border-bottom: 2px solid #f7f7f7;text-align: center;line-height: 50px;}
			 .Box .reg ul li a{font-size: 16px;padding: 16px 70px;}
			 .Box .reg ul li:hover{border-bottom: 2px solid #464646;font-weight: bold;}
			 .Box input{height: 26px;border: 1px solid #ccc;margin-top: 20px;
				margin-left: 60px;padding: 5px;}
			 .Box #btn1{height: 36px;width: 100px;margin-left: 12px;cursor: pointer;}
			 .Box #btn2{width: 300px;height: 40px;background: #d2041f;position: absolute;
				left: 0px;bottom: 280px;border-radius: 20px;color: #fff;cursor: pointer;}
			 .Box .wx{width: 280px;height: 32px;position: absolute;left: 70px;bottom: 200px;}	
			 .Box .wx ul li{float: left;width: 32px;height: 32px;margin-right: 30px;}	
			 .Box .wx ul li:last-child{margin-right: 0px;}	
			 .Box .duanxin{display: block;position: absolute;}
			 .Box .zhanghao{display: none;position: absolute;}
			 .Box #guanbi{width: 30px;height: 20px;position: absolute;top: -20px;right: 0;
			 	background: #f7f7f7;text-align: center;line-height: 20px;cursor: pointer;font-weight: bold;}
		</style>
		
	</head>
	<body>
		<div class="header">
			<div class="main">
				<div class="logo">
					<a href="#"><img src="images/cart_03.jpg"/></a>
				</div>
				<div class="kefu">
					<p>客服热线(免长途费)：<span>400-888-4499</span>&nbsp;&nbsp;<a href="#">在线客服</a></p>
					<br />
					<p>您好!欢迎光临走秀网!<a href="denglu.html">[ 登录/注册 ]</a>|<a href="#">帮助中心</a></p>
				</div>
			</div>
		</div>
		
		<div class="bg">
			<div class="main">
				
			</div>
		</div>
		<div class="box">
			<div class="main">
				<div class="box1">
					<ul>
						<li><input type="checkbox" value="" />全选</li>
						<li>商品</li>
						<li>购买价（元）</li>
						<li>数量</li>
						<li>操作</li>
					</ul>
				</div>
				<!--<div class="box2">
					<input type="checkbox" id="btn1" value="" />
					<ul id="watch">
						
					</ul>
					<div class="cle">￥14508</div>
					<ul>
						<li><input type="button" id="" value="-" /></li>
						<li><input type="text" id="" value="" /></li>
						<li><input type="button" id="" value="+" /></li>
					</ul>
					<div class="del">
						<p><a href="#">移至收藏夹</a></p>
						<p><a href="#">删除</a></p>
					</div>
				</div>-->
				<div class="box2">
					<div class="goShopping">
						<h2>&nbsp;&nbsp;<span>购物袋暂没有商品，现在就去</span><a href="index.html">挑选自己喜欢的商品 。</a></h2>
					</div>
					<ul id="exam">
						<!--<li><img src="images/g1_66_88.jpg"/></li>-->
					</ul>
				</div>
			</div>
		</div>
		
		<div class="pay">
			<div class="main">
				<ul class="chk">
					<li><input type="checkbox" id="allCheck" value="" />全选</li>
					<li><a id="deleteSelect" href="javascript:;">删除</a></li>
					<li><a href="#">清除失效商品</a></li>
					<li><a href="javascript:;" class="shoucang2">移至收藏夹</a></li>
					<li id="choose">已选商品&nbsp;<span>1</span>&nbsp;件</li>
					<li>总计（不含运费）<span>￥&nbsp;</span><span id="clear">14508</span></li>
				</ul>
				<button id="total">结算</button>
			</div>
		</div>
		
		<!--弹出登录页面-->
		<div class="Box">
			<div id="guanbi">关闭</div>
			<div class="reg">
				<ul>
					<li><a href="javascript:;" id="xx">短信登录</a></li>
					<li><a href="javascript:;" id="mm">密码登录</a></li>
				</ul>
			</div>
			<!--短信登录-->
			<div class="duanxin">
				<input type="text" placeholder="手机号码" style="width: 290px;" id="phone"/>
				<input type="text" placeholder="短信验证码" style="width: 170px;" id="code"/>
				<input type="button" value="获取验证码" id="btn1"/>
				<p style="line-height: 60px;position: absolute;left: 60px;" id="tip">提示文字</p>
				<p style="line-height: 60px;position: absolute;right: 60px;"><a href="#">找回密码</a></p>
			</div>
			
			<!--账号密码登录-->
			<div class="zhanghao">
				<input type="text" placeholder="手机号/邮箱/用户名" style="width: 290px;" id="name"/>
				<input type="password" placeholder="密码" style="width: 290px;" id="pwd"/>
				<p style="line-height: 60px;position: absolute;left: 60px;" id="tip">提示文字</p>
				<p style="line-height: 60px;position: absolute;right: 60px;"><a href="#">找回密码</a> | <a href="#">注册账号</a></p>
			</div>
			<input type="submit" id="btn2" value="登录" />
			<div class="wx">
				<ul>
					<li><a href="#"><img src="images/dl_06.jpg"/></a></li>
					<li><a href="#"><img src="images/dl_08.jpg"/></a></li>
					<li><a href="#"><img src="images/dl_10.jpg"/></a></li>
					<li><a href="#"><img src="images/dl_12.jpg"/></a></li>
					<li><a href="#"><img src="images/dl_14.jpg"/></a></li>
				</ul>
			</div>
			<a href="#" style="position: absolute;bottom: -7px;right: 0;"><img src="images/dl_22.jpg"/></a>
		</div>
		
		<div class="footer">
			<div class="main">
				<h3 class="kankan"><span>看看您收藏的商品&nbsp;</span>请<a href="#" class="denglu">登录</a>后查看您收藏的商品</h3>
				<p>Copyright © 2008-2017 <a href="#">Xiu.com</a> 深圳走秀网络科技有限公司 版权所有 . <a href="#">粤ICP备07502993号</a></p>
			</div>
		</div>
	</body>
</html>
